<template>
  <div class="content">
    <headline v-bind:title="title"></headline>
    <div class="header">
      <div class="filter">
        <el-form :label-position="labelPosition" label-width="100px">
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="订单号">
                <el-input
                  style="width: 200px"
                  v-model="arr.orderNo"
                  readonly
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                <el-input
                  style="width: 200px"
                  v-model="arr.createTime"
                  readonly
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人">
                <el-input
                  style="width: 200px"
                  v-model="arr.receiverName"
                  readonly
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="订单状态">
                <el-input
                  style="width: 200px"
                  v-model="arr.statusDesc"
                  readonly
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付方式">
                <el-input
                  style="width: 200px"
                  v-model="arr.paymentTypeDesc"
                  readonly
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单金额">
                <el-input
                  style="width: 200px"
                  v-model="arr.payment"
                  readonly
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="data-table">
      <el-table :data="biao" border style="width: 100%">
        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <img :src="arr.imageHost + scope.row.productImage" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品信息"></el-table-column>
        <el-table-column prop="totalPrice" label="单价"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column prop="currentUnitPrice" label="合计"></el-table-column>
      </el-table>
    </div>
    <below v-bind:shwHde="shwHde"></below>
  </div>
</template>
<script>
import headline from "../headline.vue";
import below from "../below.vue";

export default {
  components: { headline, below },
  data() {
    return {
      title: "订单详情",
      shwHde: [false, true],
      arr: [],
      biao: [],
      labelPosition: "right",
    };
  },
  mounted() {
    this.xiangqing();
  },
  methods: {
    xiangqing() {
      let postData = this.qs.stringify({
        orderNo: this.$route.params.id,
      });
      this.axios({
        method: "POST",
        url: "/api/manage/order/detail.do",
        data: postData,
      }).then((res) => {
        this.arr = res.data.data;
        this.biao = res.data.data.orderItemVoList;
      });
    },
    fanh() {
      this.$router.push({ path: "/home/orderform" });
    },
  },
};
</script>
<style scoped lang="less">
img {
  width: 80px;
  height: 80px;
}
</style>